<!-- 搜索房源 -->
<template>
	<div class="box">
		<heads></heads>
		<tools></tools>
		<div class="tit1">
			<div class="list">
				<div class="li" style="cursor: pointer;" @click="() => { $router.push('/') }">
					<img src="../../assets/logo.png" />
					<!-- <span>帮帮同城</span> -->
				</div>
				<div :style="olds == 2 ? 'color:#64B6A8;' : ''" @click="titleClick(2, 2)">二手房</div>
				<div :style="olds == 1 ? 'color:#64B6A8;' : ''" @click="titleClick(2, 1)">新房</div>
				<div :style="olds == 0 ? 'color:#64B6A8;' : ''" @click="titleClick(1, 0)">租房</div>
				<div class="sousuo">
					<input type="text" v-model="HousesPage.keyword" @keyup.enter="search" placeholder="请输入区域小区名称开始找房" />
					<p class="el-icon-search" @click="search"></p>
				</div>
				<!-- <div class="but">下载帮帮同城app</div> -->
			</div>
		</div>
		<div class="saixuan">
			<div class="li">
				<p class="p1">类别</p>
				<p class="p2" @click="leibieClick(-1)" :class="leibieIndex == -1 ? 'xuan' : ''">不限</p>
				<div class="list">
					<div v-for="(item, index) in type1" :key="index" @click="leibieClick(item)"
						:class="leibieIndex == item.valueNum ? 'xuan' : ''">
						{{ item.valueName }}</div>
				</div>
			</div>
			<div class="li">
				<p class="p1">租金</p>
				<p class="p2" @click="priceClick(-1)" :class="priceIndex == -1 ? 'xuan' : ''">不限</p>
				<div class="list">
					<div v-for="(item, index) in type8" :key="index" @click="priceClick(item)"
						:class="priceIndex == item.valueNum ? 'xuan' : ''">
						{{ item.valueName }}</div>
				</div>
			</div>
			<div class="li">
				<p class="p1">面积</p>
				<p class="p2" @click="mianjiClick(-1)" :class="mianjiIndex == -1 ? 'xuan' : ''">不限</p>
				<div class="list">
					<div v-for="(item, index) in type9" :key="index" @click="mianjiClick(item)"
						:class="mianjiIndex == item.valueNum ? 'xuan' : ''">
						{{ item.valueName }}</div>
				</div>
			</div>
			<div class="li">
				<p class="p1">楼层</p>
				<p class="p2" @click="loucClick(-1)" :class="loucIndex == -1 ? 'xuan' : ''">不限</p>
				<div class="list">
					<div v-for="(item, index) in type10" :key="index" @click="loucClick(item)"
						:class="loucIndex == item.valueNum ? 'xuan' : ''">
						{{ item.valueName }}</div>
				</div>
			</div>
		</div>
		<div
			style="display: flex;color: #333;font-size: 32px;font-weight: 600;width: 1200px;margin: auto;margin-bottom: 24px;">
			共找到
			<div style="color: #1cbbb4; margin: 0 5px">{{ housetotal }}</div>
			套房源
		</div>
		<houseList :houselist="houseList"></houseList>
		<!-- <div class="fenye">
		  <el-pagination
		    @current-change="HousesCurrentChange"
		    background
		    layout="prev, pager, next"
		    :total="housetotal"
		    :current-page="HousesPage.PageNo"
		  	:page-size="HousesPage.pageSize"
		  ></el-pagination>
		</div> -->
		<floor></floor>
		<div class="gotop" @click="toTop" v-show="showToTop" style="left: calc(100vw / 2 + 600px);;">
			<img src="@/assets/top.png" />返回顶部
		</div>
	</div>
</template>

<script>
import floor from "../../components/floor";
import heads from "../../components/head";
import houseList from "../../components/houseList.vue";
import tools from "../../components/tools.vue";
export default {
	components: {
		floor, heads, houseList, tools
	},
	data() {
		return {
			olds: '3',
			HousesPage: {
				pageSize: 9999,
				pageNo: 1,
				// transactionType:2,
				// newOld:2,
				keyword: '',
				upStatus: 1,
				examineStatus: 2,
				isLz: '0',
			},
			housetotal: 0,
			houseList: [],
			type8: [],
			type9: [],
			type10: [],
			type1: [],
			leibieIndex: -1,
			priceIndex: -1,
			loucIndex: -1,
			mianjiIndex: -1,
		}
	},
	created() {
		this.HousesPage.keyword = this.$route.query.search
		this.initOld()
		this.getHouseInfo()
		this.getDictionaries()
	},
	methods: {
		initOld() {
			var type = this.$route.query.transactionType;
			var old = this.$route.query.newOld;
			console.log(type + ";" + old);
			if (type == 2 && old == 2) {
				this.olds = 2;
				this.HousesPage.transactionType = 2;
				this.HousesPage.newOld = 2;
			}
			if (type == 2 && old == 1) {
				this.olds = 1;
				this.HousesPage.transactionType = 2;
				this.HousesPage.newOld = 1;
			}
			if (type == 1) {
				this.olds = 0;
				this.HousesPage.transactionType = 1;
			}
		},
		getHouseInfo() {
			this.$getHttp('/mob/home/getHouseInfo', this.HousesPage).then((data) => {
				if (data.code == 200) {
					data.list.forEach((e) => {
						if (e.hasOwnProperty("FLOOR")) {
							if (e.FLOOR.indexOf("|") == -1) {
								e.floor = ''
							} else {
								e.floor = e.FLOOR.split("|")[0] + "层/" + "共" + e.FLOOR.split("|")[1] + "层";
							}
						}
						if (!e.hasOwnProperty("shop_name")) {
							e.shop_name = "个人房源";
						}
						e.imagestate = true
						if (!e.hasOwnProperty('image')) {
							e.imagestate = false
						}
					})
					data.list.sort(function (a, b) {
						console.log(a.update_date || a.create_date - b.update_date || b.create_date)
						return (b.update_date || b.create_date) - (a.update_date || a.create_date)
					})

					this.houseList = data.list
					this.housetotal = data.count
					console.log(data)
				}
			})
		},
		getDictionaries() {
			this.$getHttp("/mob/home/getDictionaries", { type: '8,9,10,1' }).then((data) => {
				if (data.code == 200) {
					data.list.forEach(e => {
						if (e.type == 8) this.type8.push(e)
						if (e.type == 9) this.type9.push(e)
						if (e.type == 10) this.type10.push(e)
						if (e.type == 1) this.type1.push(e)
					});
				}
			})
		},
		floor(a) {
			var fool = a.split(',')
			if (fool[0] == 1) return fool[1] + "层/" + fool[2] + "层"
			if (fool[0] == 2) return fool[1] + "层-" + fool[2] + "层/共" + fool[3] + "层"
			if (fool[0] == 3) return "独栋/共" + fool[1] + "层"
		},
		search() {
			if (this.searchtext != '') {

				this.HousesPage.keyword = this.searchtext ? this.searchtext : this.HousesPage.keyword
				this.HousesPage.pageNo = 1
				this.getHouseInfo()
			}

		},
		titleClick(type, newold) {
			switch (newold) {
				//租房
				case 0:
					this.olds = newold
					this.HousesPage.transactionType = 1
					delete this.HousesPage.newOld
					break;
				//新房
				case 1:
					this.olds = newold
					this.HousesPage.transactionType = 2
					this.HousesPage.newOld = 1
					break;
				//二手房
				case 2:
					this.olds = newold
					this.HousesPage.transactionType = 2
					this.HousesPage.newOld = 2
					break;
			}
			this.HousesPage.pageNo = 1
			this.getHouseInfo()
		},
		leibieClick(item) {
			this.HousesPage.pageNo = 1
			if (item != -1) {
				this.leibieIndex = item.valueNum;
				this.HousesPage.type = item.valueNum
				this.getHouseInfo()
				return;
			}
			this.leibieIndex = item
			delete this.HousesPage.type
			this.getHouseInfo()
		},
		priceClick(item) {
			this.HousesPage.pageNo = 1
			if (item != -1) {
				this.priceIndex = item.valueNum;
				this.HousesPage.price = item.valueName
				this.getHouseInfo()
				return;
			}
			this.priceIndex = item
			delete this.HousesPage.price
			this.getHouseInfo()
		},
		mianjiClick(item) {
			this.HousesPage.pageNo = 1
			if (item != -1) {
				this.mianjiIndex = item.valueNum;
				this.HousesPage.area = item.valueName
				this.getHouseInfo()
				return;
			}
			this.mianjiIndex = item
			delete this.HousesPage.area
			this.getHouseInfo()
		},
		loucClick(item) {
			this.HousesPage.pageNo = 1
			if (item != -1) {
				this.loucIndex = item.valueNum;
				this.HousesPage.floor = item.remarks
				this.getHouseInfo()
				return;
			}
			this.loucIndex = item
			delete this.HousesPage.floor
			this.getHouseInfo()
		},
	}
}
</script>

<style lang="less" scoped>
.box {
	position: relative;
	width: 100%;
	//   max-width: 1920px;
	min-width: 1200px;
	padding-bottom: 200px;
}

.tit1 {
	width: 100%;
	height: 120px;
	background-color: #f2f2f2;

	.list {
		width: 1200px;
		margin-left: 50%;
		padding-top: 32px;
		transform: translateX(-50%);
		background-color: #f2f2f2;

		div {
			display: inline-block;
			vertical-align: middle;
			font-size: 20px;
			color: #333333;
			margin-right: 40px;
			cursor: pointer;
		}

		.li {
			font-size: 28px;
			color: #64b6a8;
			margin-right: 60px;

			img {
				/* width: 60px;
				height: 60px; */
			}

			span {
				vertical-align: middle;
			}
		}

		.sousuo {
			position: relative;
			display: inline-block;
			vertical-align: middle;
			width: 380px;
			height: 50px;
			background: #ffffff;
			border-radius: 4px;
			font-size: 18px;
			overflow: hidden;

			input {
				width: 300px;
				height: 55px;
				line-height: 55px;
				text-indent: 16px;
				font-size: 18px;
			}

			img {
				width: 25px;
				height: 25px;
				margin-left: 20px;
				cursor: pointer;
			}

			p {
				position: absolute;
				top: 0;
				right: 0;
				width: 80px;
				height: 55px;
				background-color: #64b6a8;
				text-align: center;
				line-height: 55px;
				font-size: 24px;
				cursor: pointer;
				color: #ffffff;
			}
		}

		.but {
			display: inline-block;
			width: 200px;
			height: 50px;
			background: #64b6a8;
			border-radius: 6px;
			text-align: center;
			line-height: 50px;
			color: #fff;
		}
	}
}

.saixuan {
	color: #333;
	width: 1200px;
	margin-left: 50%;
	transform: translateX(-50%);
	font-size: 0;
	margin-top: 40px;
	padding-bottom: 20px;

	.li {
		.p1 {
			display: inline-block;
			font-size: 16px;
			font-weight: 600;
			margin-right: 32px;
			vertical-align: top;
		}

		.p2 {
			display: inline-block;
			font-size: 16px;
			margin-right: 32px;
			vertical-align: top;
			cursor: pointer;
		}

		div {
			display: inline-block;
			font-size: 16px;
			margin-right: 30px;
			vertical-align: top;
			margin-bottom: 10px;
		}

		.list {
			width: 1040px;

			div {
				cursor: pointer;
			}
		}

		.xuan {
			color: #64b6a8;
		}
	}
}

.fenye {
	width: 100%;
	height: 50px;
	text-align: center;
	margin-bottom: 110px;
}
</style>
